import { Demo1Component } from './demo1/demo1.component';
import { Demo4Component } from './demo4/demo4.component';
import { Demo5Component } from './demo5/demo5.component';
import { TreeTransferComponent } from './tree-transfer/tree-transfer.component';
import { AsyncComponent } from './async/async.component';
import { CustomOperationAreaComponent } from './custom-operation-area/custom-operation-area.component';

export const TransferConfig = {
  location: 'Transfer',
  description: '同时展现可选对象以及已选对象的选择控件，一般备选在左，已选在右。其中，左边一栏为 source，右边一栏为 target。(功能完善中)',
  description_en: `At the same time, the selectable objects and the selection controls of the selected objects are displayed. Generally, the selection is on the left, and the selected object is on the right. Among them, the left column is source, and the right column is target. (Function in progress)`,
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/transfer/demo1/demo1.component',
      demoTitle: '标准模式',
      demoTitle_en: 'Standard Mode',
      demoDescription: `穿梭框应用在选择多个对象的场景中，适用于待选择对象数量比较多，且需要反复对比可选项和已选项的情况，选中数据自动复制到右边栏（目标）。如果用户在选择时需要除名称之外的很多额外信息进行分析和判断，支持采用表格的形式。`,
      demoDescription_en: `The shuttle box is used in the scene where multiple objects are selected. It is suitable for the situation where the number of objects to be selected is relatively large, and the optional and selected options need to be repeatedly compared. The selected data is automatically copied to the right column (target). If the user needs a lot of additional information other than the name for analysis and judgment, the form of a table is supported.`,
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/transfer/demo4/demo4.component',
      demoTitle: '精简模式',
      demoTitle_en: 'Lite mode',
      demoDescription: `对于空间受限或者简单的表单中，可以采用精简模式。`,
      demoDescription_en: `For space-constrained or simple forms, the compact mode can be used.`,
    },
    {
      demo: CustomOperationAreaComponent,
      codePath: 'showcase/transfer/custom-operation-area/custom-operation-area.component',
      demoTitle: '自定义操作区',
      demoTitle_en: 'Custom Operation Area',
      demoDescription: ``,
      demoDescription_en: ``,
    },
    {
      demo: AsyncComponent,
      codePath: 'showcase/transfer/async/async.component',
      demoTitle: '远程加载数据',
      demoTitle_en: 'Asynchronous data',
      demoDescription: `从服务端读取并展现数据。`,
      demoDescription_en: `Read and display data from the server.`,
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/transfer/demo5/demo5.component',
      demoTitle: 'Checkbox穿梭框',
      demoTitle_en: 'Checkbox Transfer',
      demoDescription: ``,
      demoDescription_en: ``,
    },
    {
      demo: TreeTransferComponent,
      codePath: 'showcase/transfer/tree-transfer/tree-transfer.component',
      demoTitle: '树穿梭框',
      demoTitle_en: 'Tree Transfer',
      demoDescription: `如果选择对象为树型结构时，备选区域以树型结构呈现，已选项可设置附属信息展示路径。`,
      demoDescription_en: `If the selected object is a tree structure, the candidate area is presented in a tree structure, and the display path of auxiliary information can be set if the option is selected.`,
    },
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-transfer',
  snippet: ``,
  api: [
    {
      attribute: 'lvTitles',
      type: `Array&lt;string | TemplateRef&lt;void&gt;&gt;`,
      default: `[Title,Selected]`,
      description: `标题集合，顺序从左至右`,
      description_en: ``,
    },
    {
      attribute: 'lvHeaders',
      type: 'Array&lt;TemplateRef&lt;{ $implicit: any }&gt; | null&gt;',
      default: '',
      description: `头部渲染模板`,
      description_en: ``,
    },
    {
      attribute: 'lvRenders',
      type: ' Array&lt;TemplateRef&lt;{ $implicit: any }&gt; | null&gt;',
      default: '[Table,Table]',
      description: `自定义渲染列表。自定义渲染列表下无默认分页器。`,
      description_en: `Custom render list. There is no default pager under the custom rendering list.`,
    },
    {
      attribute: 'lvFooters',
      type: 'Array&lt;TemplateRef&lt;{ $implicit: any }&gt; | null&gt;',
      default: '[Paginator,Paginator]',
      description: `底部渲染模板`,
      description_en: ``,
    },
    {
      attribute: 'lvOperateTemplate',
      type: 'Array&lt;TemplateRef&lt;{ $implicit: { [key: string]: any }[]; selection: { [key: string]: any }[]; paginator: PaginatorComponent; panel: TransferTableComponent; }&gt; | null&gt;',
      default: '',
      description: `自定义操作区`,
      description_en: ``,
    },
    {
      attribute: 'lvSourceData',
      type: '{ [key: string]: any }[]',
      default: '[]',
      description: `左边栏（源）数据`,
      description_en: ``,
    },
    {
      attribute: 'lvSourceSelection',
      type: '{ [key: string]: any }[]',
      default: '[]',
      description: `左边栏（源）选中项`,
      description_en: ``,
    },
    {
      attribute: 'lvSourceColumns',
      type: 'TransferColumnItem[]',
      default: '[]',
      description: `左边栏（源）数据列配置，默认（表格）场景使用。TransferColumnItem 属性如下：
      <ul>
        <li>[key: string] key，具有唯一性 (必须)</li>
        <li>[label: string] 列的名称 (必选)</li>
        <li>[width: number | string] 列宽度 (可选)</li>
        <li>[align: 'left' | 'right'] 列名称对齐方式 (可选)</li>
        <li>[isHidden: boolean] 列是否隐藏 (可选)</li>
        <li>[disabled: boolean] 列是否禁用 (可选)</li>
        <li>[render?: TemplateRef<any>] 单元格自定义模板 (可选)</li>
        <li>[filterType: FilterType] 过滤类型 (可选)</li>
        <li>[[key: string]: any] 其他 (可选)</li>
      </ul>`,
      description_en: ``,
    },
    {
      attribute: 'lvTargetData',
      type: '{ [key: string]: any }[]',
      default: '[]',
      description: `右边栏（目标）数据`,
      description_en: ``,
    },
    {
      attribute: 'lvTargetSelection',
      type: '{ [key: string]: any }[]',
      default: '[]',
      description: `右边栏（目标）选中项`,
      description_en: ``,
    },
    {
      attribute: 'lvTargetColumns',
      type: 'TransferColumnItem[]',
      default: '[]',
      description: `右边栏（目标）数据列配置项，默认（表格）场景使用。TransferColumnItem 属性如下：
      <ul>
        <li>[key: string] key，具有唯一性 (必须)</li>
        <li>[label: string] 列的名称 (必选)</li>
        <li>[width: number | string] 列宽度 (可选)</li>
        <li>[align: 'left' | 'right'] 列名称对齐方式 (可选)</li>
        <li>[isHidden: boolean] 列是否隐藏 (可选)</li>
        <li>[disabled: boolean] 列是否禁用 (可选)</li>
        <li>[render?: TemplateRef<any>] 单元格自定义模板 (可选)</li>
        <li>[filterType: FilterType] 过滤类型 (可选)</li>
        <li>[[key: string]: any] 其他 (可选)</li>
      </ul>`,
      description_en: ``,
    },
    {
      attribute: 'lvDataKey',
      type: 'string',
      default: 'id',
      description: `唯一标识，用于数据比较`,
      description_en: ``,
    },
    {
      attribute: 'lvAsync',
      type: 'boolean',
      default: 'false',
      description: '是否为异步数据表格, 即后台表格',
      description_en: 'Whether is asynchronous data table.(backend table)',
    },
    {
      attribute: 'lvColDisplayControl',
      type: 'boolean',
      default: 'true',
      description: `是否开启列显示/隐藏`,
      description_en: ``,
    },
    {
      attribute: 'lvItemSize',
      type: 'number',
      default: '10',
      description: `每页显示条数`,
      description_en: ``,
    },
    {
      attribute: 'lvTotal',
      type: 'number',
      default: '0',
      description: '总条数，异步场景使用',
      description_en: 'The total number of records, used in asynchronous scenarios',
    },
    {
      attribute: 'lvShowTotal',
      type: 'boolean',
      default: 'true',
      description: '是否显示 source 框统计数字',
      description_en: 'Whether to show source box statistics',
    },
    {
      attribute: 'lvShowSelectionTotal',
      type: 'boolean',
      default: 'true',
      description: '是否显示 target 框统计数字',
      description_en: 'Whether to show target box statistics',
    },
  ],
  event: [
    {
      event: 'lvSelectionChange',
      parameter: `--`,
      description: '列表选择回调函数',
      description_en: ``,
    },
    {
      event: 'lvStateChange',
      parameter: ``,
      description: '列表条件变更回调',
      description_en: 'Table condition change back',
    },
    {
      event: 'lvChange',
      parameter: `--`,
      description: '数据穿梭，左边栏（源）、右边栏（目标）数据发生变化时的回调函数',
      description_en: ``,
    },
    {
      event: 'lvSourceColDisplayChange',
      parameter: `--`,
      description: '源数据列变更回调',
      description_en: `Source data column change callback`,
    },
    {
      event: 'lvTargetColDisplayChange',
      parameter: `--`,
      description: '目标数据列变更回调',
      description_en: `Target data column change callback`,
    },
  ],
};
